<template>
<view class="container pppp" :style="'padding-bottom:' + (systemInfo.model == 'iPhone X' ? 164 :98) + 'rpx;'">
    <view class="searchHeader">
        <view class="searchBox">
            <view class="searchIco"></view>
            <input type="text" class="searchTxt" :placeholder="searchDesc" autocomplete="off" @input="inputKeyHandle" :value="emptyKey"></input>
            <view class="delIco" :style="'display:' + (inputKey ? 'block' : 'none')" @tap="delInput"><view></view></view>
        </view>
        <view :class="'searchBtn ' + (inputKey ? 'so' : '')" @tap="searchBtn"><lang keywords="搜索"></lang></view>
    </view>
    <scroll-view class="scrollList" scroll-y="true" bindscrolltolower="onListReachBottom" :style="'height:' + main_height + 'px;'">
        <block v-for="(item, storeIndex) in store_list" :key="storeIndex"> 
            <view class="business bw" @tap="goDetail(item.store_id)">
                <view class="bus_top">
                    <view class="bus_n clearfix">
                        <view class="fl bus_tit">{{item.store_name}}</view>
                        <view class="fl bus_list clearfix">
                            <view class="fb7 fl" v-if="item.have_group==1">团</view>
                            <view class="fc6 fl" v-if="item.have_shop==1">快</view>
                        </view>
                    </view>
                    <view class="bus_bot clearfix">
                        <view class="fl dealcard">
                            <view class="title">
                                <view class="star">
                                    <block v-if="item.score > 0">
                                        <block v-for="(i, index) in [0,1,2,3,4]" :key="index">
                                            <image src="/static/images/full_star.png" v-if="item.score >= i+1"></image>
                                            <image src="/static/images/mid_star.png" v-else-if="item.score > i"></image>
                                            <image src="/static/images/none_star.png" v-else></image>
                                        </block>
                                    </block>
                                    <block v-else>
                                        <image src="/static/images/full_star.png"></image>
                                        <image src="/static/images/full_star.png"></image>
                                        <image src="/static/images/full_star.png"></image>
                                        <image src="/static/images/mid_star.png"></image>
                                        <image src="/static/images/none_star.png"></image>
                                    </block>
                                </view>
                            </view>
                        </view>
                        <view class="fr kilometre">{{item.range_txt}}</view>
                    </view>
                </view>
                <block v-if="item.discount_str !=''">
                    <view class="bus_end clearfix" @click.stop="goPrepay(item.store_id)" >
                        <view class="fl store">到店付</view>
                        <view class="fl introduce">{{item.discount_str}}</view>
                    </view>
                </block>
                <view :class="'menu_list ' + (item.group_count > 2 ? 'hasMore' : '') + ' ' + (show_list_more[item.store_id] ? 'showMore' : '')">
                    <view class="menu_n">
                        <block v-for="(citm, cidx) in item.group_list" :key="cidx">
                            <view :class="'menulink  ' + (cidx < 2 || show_list_more[item.store_id] ? '' : 'hide')" @click.stop="goGroup(citm.url)" v-if="citm.pin_num == 0">
                                <view class="fl ml_left">
                                    <image :src="citm.list_pic"></image>
                                    <view :class="'pos ' + (citm.pin_num == 0 ? 'group' : 'fight')"></view>
                                </view>
                                <view class="ml_menu">
                                    <view class="tit">{{citm.group_name}}</view>
                                    <view class="clearfix bot">
                                        <view class="fl clearfix">
                                            <view class="fl val">
                                                <text class="mall">￥</text>
                                                <text class="price">{{citm.price}}</text>
                                            </view>
                                            <view class="fl rackrate">{{citm.old_price}}</view>
                                        </view>
                                        <view class="fr sold" v-if="citm.sale_count != 0"> <lang keywords="已售" chineseTxt="已售"></lang> {{citm.sale_count}}</view>
                                    </view>
                                </view>
                            </view>
                        </block>
                    </view>
                    <view class="more" v-if="item.group_count > 2" @click.stop="showMore($event)" :data-count="item.group_count" :data-store_id="item.store_id">
						<lang keywords="其他X1个团购" :X1="item.group_count-2" :chineseTxt="'其他'+ (item.group_count-2) +'个团购'"></lang>
                    </view>
                </view>
            </view>
        </block>
    </scroll-view>
</view>

</template>

<script>
import common from '../../utils/common.js'
var app = getApp();
var sysRes = {};
var rpxUnit = 0;
var now_page = 1;
var total_page = 0;
var mapInputTimer = null;
var _this;

export default {
  data() {
    return {
      inputKey: '',
      emptyKey: '',
      user_longlat: {},
      store_list: [],
      show_list_more: {},
      main_height: 0,
      systemInfo: '',
	  searchDesc: ''
    };
  },

  components: {},
  props: {},
  mounted () {
	  // 在组件实例进入页面节点树时执行
	  _this = this;
	  
	    _this.systemInfo = app.globalData.systemInfo
	    _this.searchDesc = common.changeTxt('请输入店铺名称')
	  
	  wx.setNavigationBarTitle({
	    title: common.changeTxt('店铺列表')
	  });
	  sysRes = wx.getSystemInfoSync();
	  console.log(sysRes);
	  rpxUnit = sysRes.windowWidth / 750;
	    this.main_height = sysRes.windowHeight - 110 * rpxUnit
	  var user_location = wx.getStorageSync("selected_address");
	  
	  if (user_location) {
	    this.saveLocation(user_location);
	  } else {
	    common.getLocation("saveLocation", this, 'baidu');
	  }
	  
	  ;
	  common.setMainColor(_this);
  },
  methods: {
    goGroup: function (url) {
      common.parseUrl(url)
    },
    goDetail: function (id) {
		let url = common.requestDomain + 'packapp/my/store/index.html?store_id=' + id
      common.parseUrl(url)
    },
    goPrepay: function (id) {
		
		let url = common.requestDomain + 'wap.php?c=My&a=pay&store_id=' + id
      common.parseUrl(url)
    },
    delInput: function () {
        this.emptyKey = ''
        this.inputKey = ''
      now_page = 1;
      total_page = 0;
        this.show_list_more = {}
        this.store_list = []
      common.post('Merchant&a=store_list', {
        lat: this.user_longlat.lat,
        lng: this.user_longlat.lng,
        page: now_page
      }, "setOneContent", this);
    },
    inputKeyHandle: function (e) {
        this.inputKey = e.detail.value
    },
    searchBtn: function () {
      now_page = 1;
      total_page = 0;
        this.show_list_more = {}
        this.store_list = []
        if (this.inputKey == '') {
          common.post('Merchant&a=store_list', {
            lat: this.user_longlat.lat,
            lng: this.user_longlat.lng,
            page: now_page
          }, "setOneContent", this);
        } else {
          common.post('Merchant&a=store_list', {
            store_name: this.inputKey,
            lat: this.user_longlat.lat,
            lng: this.user_longlat.lng,
            page: now_page
          }, "setOneContent", this);
        }
    },
    saveLocation: function (res) {
      if (!res.lng && !res.lat) {
        res = {
          lat: 0,
          lng: 0
        };
      }
      this.user_longlat = res;
      common.post('Merchant&a=store_list', {
        lat: this.user_longlat.lat,
        lng: this.user_longlat.lng
      }, "setOneContent", this);
    },
    showMore: function (e) {
      if (e.currentTarget.dataset.count > 2) {
        var show_list_more = this.show_list_more;
        show_list_more[e.currentTarget.dataset.store_id] = !show_list_more[e.currentTarget.dataset.store_id];
          this.show_list_more = show_list_more
		  this.$forceUpdate()
      } else {
        return false;
      }
    },
    setOneContent: function (result) {
      total_page = result.totalPage;
        this.store_list = this.store_list.concat(result.store_list)
      wx.hideToast();
    },
    onListReachBottom: function () {
      if (total_page != 0 && now_page >= total_page) {
        return false;
      }

      if (this.store_list.length > 0) {
        now_page++;
        common.post('Merchant&a=store_list', {
          lat: this.user_longlat.lat,
          lng: this.user_longlat.lng,
          page: now_page
        }, "setOneContent", this);
      }
    }
  }
};
</script>
<style>

.searchHeader {
    top: 0;
    height: 100rpx;
    background: white;
    width: 100%;
    z-index: 21;
    position: static;
    margin-bottom:10rpx;
    overflow: hidden;
}
.searchBox {
    background-color: #f4f4f4;
    height: 76rpx;
    margin-left:12rpx;
    margin-right: 148rpx;
    margin-top: 12rpx;
    position: relative;
}
.searchBox .searchIco {
    position: absolute;
    left: 20rpx;
    top: 24rpx;
}
.searchBox .searchIco:before, .searchBox .searchIco:after {
    content: '';
    height: 20rpx;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.searchBox .searchIco:before {
    width: 20rpx;
    border: 2rpx #A6A6A6 solid;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
}
.searchBox .searchIco:after {
    width: 2rpx;
    background: #A6A6A6;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    top: 20rpx;
    left: 22rpx;
    height: 8rpx;
}
.searchTxt {
    height: 60rpx;
    line-height: 60rpx;
    border: none;
    margin-left: 64rpx;
    background: transparent;
    outline: none;
    font-size: 28rpx;
    padding-top: 10rpx;
}
.delIco {
    position: absolute;
    right: 0;
    top: 0;
    width: 76rpx;
    height: 76rpx;
    z-index: 999;
}
.delIco view {
    background-color: #CDCDCD;
    border-radius: 100%;
    width: 40rpx;
    height: 40rpx;
    margin-left: 18rpx;
    margin-top: 18rpx;
}
.delIco view:before,.delIco view:after {
    content: '';
    height: 4rpx;
    width: 28rpx;
    display: block;
    background: white;
    border-radius: 20rpx;
    position: absolute;
    top: 36rpx;
    left: 24rpx;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
}
.searchBox .delIco view:after {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}
.searchBtn {
    position: absolute;
    width: 100rpx;
    height: 76rpx;
    line-height: 76rpx;
    top: 12rpx;
    right: 12rpx;
    text-align: center;
    background-color: #B5B5B5;
    color: white;
    padding: 0 12rpx;
}
.searchBtn.so {
    background-color: #06c1ae;
}
.searchAddressList {
    margin-top: 100rpx;
}
.searchAddressList .title {
    line-height: 100rpx;
    color: #999;
    padding-left: 24rpx;
}
.content {
    border-top: 1rpx solid #edebeb;
    border-bottom: 1rpx solid #edebeb;
}
.content .item{
    padding: 24rpx 0px;
    padding-left: 24rpx;
    background-color: white;
    border-bottom: 2rpx solid #f1f1f1;
    font-size:24rpx;
}
.content .item:last-child {
    border-bottom: none;
}
.content .item .name {
    font-size: 32rpx;
}
.content .item .desc {
    color: #999;
}


.searchAddressList.search .item{
    padding: 16rpx 0px;
    padding-left: 24rpx;
}
.searchAddressList.search .item .name {
    font-size: 28rpx;
}

.business{ margin-bottom: 20rpx; line-height: 32rpx; padding: 0 20rpx;}
.business .bus_top{ padding:20rpx 0; border-bottom: 2rpx #f1f1f1 solid; }
.business .bus_tit{ font-size: 32rpx; }
.business .bus_bot{ padding-top: 10rpx; color: #666;}
.business .bus_bot .kilometre{ color: #b7b7b7; font-size: 24rpx;}
.business .bus_list{ font-size: 22rpx;}
.business .bus_list view{ width: 32rpx; height: 32rpx; line-height: 32rpx; text-align: center;   color: #fff; margin-left: 10rpx; background: #00cccc; border-radius: 5rpx;}
.dealcard .title.pick{ margin-top: 0rpx;}
.business .bus_list view.fb7{background: #f88203;}
.business .bus_list view.fc6{background: #fc6e52;}
.bus_end .store{ background: url(https://hf.pigcms.com/tpl/Wap/pure/static/images/cyt_17.png) 10rpx center no-repeat; background-size: 24rpx 20rpx;  font-size: 22rpx; border: 2rpx #06c1ae solid; border-radius: 50px; padding:0 10rpx 0 40rpx;line-height: 28rpx; color: #06c1ae; height: 28rpx; }
.business .bus_end{ padding: 20rpx 0;border-bottom: 2rpx #f1f1f1 solid; color: #818181; }
.business .introduce{ padding-left: 20rpx; font-size: 24rpx; }
.dealcard .title text, .dealcard .price text{ font-size: 24rpx;}
.business .introduce:after{ display:inline-block;content:" ";border-top:2rpx solid #BFBFBF;border-left:2rpx solid #BFBFBF;width:15rpx;height:15rpx;-webkit-transform:rotate(135deg);background-color:transparent; margin-left: 10rpx; }
.menu_list .more{ text-align: center;  line-height: 72rpx; height: 72rpx;color:#818181;font-size:24rpx;}
.menu_list .more text:after{display:inline-block;content:" ";border-top:2rpx solid #BFBFBF;border-left:2rpx solid #BFBFBF;width:15rpx;height:15rpx;-webkit-transform:rotate(225deg);background-color:transparent; margin-top: -5rpx; margin-left: 10rpx;position: relative;top: -5rpx;}
.menu_list.showMore .more{display: none}

/*店铺列表*/

.dealcard .item {
  background-color: white;
  overflow: hidden;
  position: relative;
  border-bottom: 2rpx solid #f1f1f1;
  padding: 16rpx 16rpx;
  margin-bottom: 16rpx;
}

.dealcard .dealcard-img {
  width: 180rpx;
  height: 120rpx;
  border-radius: 4rpx;
  float: left;
  position: absolute;
  overflow: hidden;
}

.dealcard .dealcard-img image {
  width: 100%;
  height: 100%;
  border-radius: 4rpx;
}

.dealcard .dealcard-img .closeTip {
  position: absolute;
  top: 80rpx;
  width: 100%;
  color: white;
  background: black;
  text-align: center;
}

.dealcard .dealcard-block-right {
  margin-left: 200rpx;
}

.dealcard .brand {
  font-size: 32rpx;
  line-height: 48rpx;
  color: #333;
}

.dealcard .location-right {
  position: absolute;
  top: 16rpx;
  right: 8rpx;
  color: #666;
  font-size: 22rpx;
}

.dealcard .title {
  padding-left: 148rpx;
}

.dealcard .title, .dealcard .price {
  position: relative;
}

.dealcard .title.pick {
  margin-top: 28rpx;
}

.dealcard .title text, .dealcard .price text {
  color: #666;
  font-size: 22rpx;
}

.dealcard .title .star {
  vertical-align: middle;
  margin-left: 4rpx;
  position: absolute;
  left: 0px;
  top: 4rpx;
}

.dealcard .title .star image {
  width: 24rpx;
  height: 24rpx;
  display: inline-block;
  background-size: 100%;
  margin-right: 4rpx;
}

.dealcard .title .location-right {
  top: 4rpx;
}

.dealcard .price text.delivery {
  border-left: 2rpx solid #bbb;
  padding-left: 16rpx;
  margin-left: 16rpx;
}

.dealcard .price .location-right, .dealcard .title.pick .location-right {
  background: #06c1ae;
  color: white;
  padding: 0px 4rpx;
  border-radius: 4rpx;
  font-size: 20rpx;
  top: 8rpx;
}

.dealcard .coupon {
  color: #bbb;
  font-size: 22rpx;
  margin-top: 10rpx;
  padding-top: 10rpx;
  border-top: 2rpx solid #f1f1f1;
  overflow: hidden;
}

.dealcard .coupon.hasMore {
  height: 88rpx;
}

.dealcard .coupon.showMore {
  height: auto;
}

.dealcard .coupon view {
  position: relative;
  padding-left: 40rpx;
  line-height: 44rpx;
  padding-right: 120rpx;
  height: 44rpx;
  overflow: hidden;
  word-break: keep-all;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dealcard .coupon.showMore view {
  height: auto;
  word-break: inherit;
  white-space: inherit;
}

.dealcard .coupon view text {
  width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  display: inline-block;
  background-color: red;
  position: absolute;
  left: 0;
  top: 6rpx;
  border-radius: 4rpx;
}

.dealcard .coupon view text:before {
  content: '惠';
  font-size: 22rpx;
  color: white;
  margin-left: 6rpx;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.bw {
  background-color: white !important;
}

.menulink {
  border-bottom: 2rpx #f1f1f1 solid;
  padding: 16rpx 0;
  position: relative;
}

.menulink:last-child {
  border-bottom: none;
}

.menulink .ml_left {
  width: 180rpx;
  height: 120rpx;
  border-radius: 4rpx;
  position: relative;
}

.menulink .ml_left image {
  width: 100%;
  height: 100%;
  border-radius: 4rpx;
}

.menulink .ml_menu {
  margin-left: 200rpx;
  height: 110rpx;
  overflow: hidden;
  padding: 5rpx 0;
}

.menulink .ml_menu .tit {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 64rpx;
  line-height: 32rpx;
  color: #818181;
  font-size: 24rpx;
}

.menulink .ml_menu .bot {
  padding-top: 10rpx;
  line-height: 40rpx;
  height: 40rpx;
}

.menulink .ml_menu .bot .val {
  color: #fd2a48;
  margin-right: 10rpx;
  height: 40rpx;
}

.menulink .ml_menu .bot .mall {
  font-size: 26rpx;
}

.menulink .ml_menu .bot .price {
  font-size: 40rpx;
}

.menulink .ml_menu .bot .rackrate {
  font-size: 26rpx;
  color: #b7b7b7;
  position: relative;
  margin-top: 5rpx;
  text-decoration: line-through;
}

.menulink .ml_menu .bot .sold {
  font-size: 22rpx;
  color: #b7b7b7;
}

.menulink .pos {
  width: 80rpx;
  height: 80rpx;
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
}

.menulink .group {
  background: url(https://hf.pigcms.com/static/wxapp/tuan.png) no-repeat;
  background-size: 80rpx 80rpx;
}

.menulink .fight {
  background: url(https://hf.pigcms.com/static/wxapp/ping.png) no-repeat;
  background-size: 80rpx 80rpx;
}
.clearfix:after, .cf:after {
  content: '';
  clear: both;
  display: block;
}
</style>